<template>
  <div class="search-container">
    <Header></Header>
    <NavList></NavList>
    <SearchMain></SearchMain>
    <SideBtn></SideBtn>
  </div>
</template>

<script>
import Header from '@/components/header/Header.vue'
import SearchMain from './componets/SearchMain.vue'
import NavList from '@/components/navList/NavList.vue'
import SideBtn from '@/components/sideButton/sidewButton.vue'

import mixin from '@/mixins/scroll'

import { mapState, mapMutations } from 'vuex'
export default {
  mixins: [mixin],
  computed: {
    ...mapState(['isHideHead'])
  },
  methods: {
    ...mapMutations([
      'updateIsHideHead',
      'updateIsArriveBottom'
    ]),
    scrolling() {
      // scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop = document.documentElement.scrollTop
      // windowHeight是可视区的高度
      let windowHeight = document.documentElement.clientHeight
      // scrollHeight是滚动条的总高度
      let scrollHeight = document.documentElement.scrollHeight
      // 滚动条滚动的距离
      let scrollStep = scrollTop - this.oldScrollTop

      // 更新——滚动前，滚动条距文档顶部的距离
      this.oldScrollTop = scrollTop
      if (scrollTop > 60 && scrollStep > 0) {
        this.updateIsHideHead(true)
      } else {
        this.updateIsHideHead(false)
      }

      // 回到顶部按钮出现的时机
      if (scrollTop > 900) {
        this.updateIsArriveBottom(true)
      } else {
        this.updateIsArriveBottom(false)
      }

      // 滚动条到底部的条件
      if (scrollHeight - scrollTop - windowHeight < 100) {
        // 请求新数据
        this.$bus.$emit('searchArriveBottom')
        console.log('请求新数据')
      }
    }
  },
  components: {
    Header,
    NavList,
    SearchMain,
    SideBtn
  }
}
</script>

<style lang="less" scoped>
.search-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
</style>
